<template>

    <Header></Header>
    <NavSwiper></NavSwiper>
    <!-- 异步组件 -->
    <div ref="target">
        <NewCourse v-if='targetIsVisible'></NewCourse>
    </div>

    <Footer></Footer>


</template>
<script setup>



// 引入头组件
import Header from '@/components/common/Header.vue';

// 引入轮播图组件
import NavSwiper from '@/components/Home/NavSwiper.vue';

// 引入底部组件
import Footer from '@/components/Home/Footer.vue';

// 引入异步组件
import { useIntersectionObserver } from '@vueuse/core'
// 引入新上好课组件
const NewCourse = defineAsyncComponent(() =>
    import('@/components/Home/NewCourse.vue')
)

const target = ref(null);
const targetIsVisible = ref(false);

const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
        if (isIntersecting) {
            targetIsVisible.value = isIntersecting
        }
    },
)

</script>